import React from 'react';
// import styles from './Article.less'
import {connect} from 'umi';
import {Tag, Table, Modal,message} from "antd";
import {delArticle} from "@/pages/article/service";

class Article extends React.Component {
  constructor() {
    super();
    this.state = {
      pageNum: 1,
      pageSize: 10
    }
  }

  componentDidMount() {
    // this.props.dispatch({
    //   type: 'user/fetchCurrent',
    // })
    const {pageNum, pageSize} = this.state;
    this.props.dispatch({
      type: 'article/initListData',
      params: {
        pageNum,
        pageSize
      }
    })
  }

  handlePageChange(pageNum, pageSize) {
    this.setState({
      pageNum,
      pageSize
    })
    this.props.dispatch({
      type: 'article/initListData',
      params: {
        pageNum,
        pageSize
      }
    })
  }

  handleChange(pagination, filters, sorter,) {
    const {pageNum, pageSize} = this.state;
    if (sorter.field) {
      // 需要按照指定列进行排序
      this.props.dispatch({
        type: 'article/initListData',
        params: {
          pageNum,
          pageSize,
          orderByColumn: sorter.field,
          isAsc: sorter.order.replace("end", "")
        }
      })
    }
  }

  handleDel(articleId) {
    Modal.confirm({
      content: "确定删除吗",
      okText: "删除",
      cancelText: "取消",
      okType: "danger",
      onOk:()=>{
        delArticle(articleId).then(res=>{
          if (res.code === 0) {
            message.success("删除成功");
            const {pageNum, pageSize} = this.state;
            this.props.dispatch({
              type: 'article/initListData',
              params: {
                pageNum,
                pageSize
              }
            })
          }else {
            message.error(res.msg)
          }
        })
      }
    })
  }

  handleEdit(articleId) {
    this.props.history.push("/article/edit/"+articleId)
  }


  render() {
    const {list, total, listLoading} = this.props;
    const {pageNum, pageSize} = this.state;

    const columns = [
      {
        title: '标题',
        dataIndex: 'title',
        key: 'title',
      },
      {
        title: '来源',
        dataIndex: 'articleSource',
        key: 'articleSource',
      },
      {
        title: '文章时间',
        dataIndex: 'sendTime',
        key: 'sendTime',
      },
      {
        title: '是否轮播',
        dataIndex: 'isBanner',
        key: 'isBanner',
        sorter: true,
        render: value => (
          <Tag color={value === "1" ? "lightgreen" : "red"}>
            {value === "1" ? '是' : '否'}
          </Tag>
        ),
      },
      {
        title: '操作',
        dataIndex: '',
        key: 'x',
        render: (text, record) => (
          <div>
            <a style={{"marginRight": "10px"}}  onClick={this.handleEdit.bind(this,record.articleId)}>编辑</a>

            <a onClick={this.handleDel.bind(this, record.articleId)}>删除</a>
          </div>
        ),
      },
    ];

    const pagination = {
      current: pageNum,
      pageSize,
      total,
      onChange: this.handlePageChange.bind(this)
    }

    return (
      <div>
        <Table onChange={this.handleChange.bind(this)} dataSource={list} columns={columns} pagination={pagination}
               loading={listLoading} rowKey="articleId"/>
      </div>
    );
  }
}

export default connect(({article}) => ({...article}))(Article);
